<!--
 * @Author: your name
 * @Date: 2021-08-16 08:33:47
 * @LastEditTime: 2022-02-09 16:47:29
 * @LastEditors: tc
 * @Description: In User Settings Edit
 * @FilePath: \yyzxwebd:\hsx\水文局设备运行巡检管理平台\web\src\views\equipmentManage\safeGuardList\add.vue
-->
<template>
    <el-dialog 
        :title="'修改密码'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="600px"
        :before-close="onCancel"
    >
        <!-- fullscreen -->
        <el-form class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="100px" label-position="right">
            <el-form-item label="旧密码:" prop="oldPassword">
                <el-input v-model="form.oldPassword"  clearable placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码:" prop="newPassword">
                <el-input v-model="form.newPassword"  clearable placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPass">
                <el-input v-model="form.checkPass"  clearable placeholder="请再次输入密码"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import userApi from '@/api/user'
export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        item:{
            default:()=>{
                return {}
            },
            type: Object
        }
    },
    data(){
         var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.form.checkPass !== '') {
                this.$refs.form.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newPassword) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return {
            loading:false,
            firstEdit:true,
            form:{
                oldPassword:'',
                newPassword:'',
                checkPass:''
            },
            rules:{
                oldPassword: [
                    { required: true, validator: validatePass, trigger: ['change','blur'] }
                ],
                newPassword:[
                    { required: true, message: '请输入新密码', trigger:  ['change','blur'] },
                    { min: 6, message: '长度必须超过6位数', trigger:  ['change','blur']}
                ],
                checkPass:[
                    { required: true, validator: validatePass2, trigger: ['change','blur'] }
                ],
            },
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
            }else{
                this.$refs['form'].resetFields()
                this.form.oldPassword = ''
                this.form.newPassword = ''
                this.form.checkPass = ''
                // Object.assign(this.$data,this.$options.data())
            }
        }
    },
    created(){
    },
    methods:{
        onSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                        this.loading = true
                        userApi.RestPassword({
                            newPassword:this.form.newPassword,
                            oldPassword:this.form.oldPassword,
                            userId:this.item.userId
                        }).then((res)=>{
                            this.loading = false
                            this.$emit('onChange',{bool:false,refresh:true})
                            this.$message.success(res.message)
                        }).catch((err)=>{
                            this.loading = false
                            this.$message.error(err.message || '修改失败！')
                        })
                } else {
                    return false
                }
            })
        },
        onCancel(){
            this.$emit('onChange',{bool:false})
        }
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 50vh;
        overflow-y: auto;
    }
    .width100{
        width: 100%;
    }
    ::v-deep.upload_box .el-upload-list__item-preview{
        display: none !important;
    }
    .img_box{
        display: flex;
        flex-wrap: wrap;
        &>div{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            margin-right: 10px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover{
                .delete_icon{
                    background-color: rgba(0,0,0,0.7);
                    display: flex;
                }
            }
            .delete_icon{
                display: none;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                color: #fff;
                font-size: 20px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                
            }
        }
        
    }
</style>

